<template>
    <div id="login" class="login">
        <canvas id="canvas" :width="clientWidth1" :height="clientHeight1"></canvas>
        <div class="login-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <div class="login-form">
                    <div class="login-form-input">
                        <div class="login-form-label">账户名</div>
                        <el-form-item prop="userName">
                            <el-input
                                    placeholder="请输入账户名"
                                    type="text"
                                    v-model.trim="ruleForm.userName"
                                    @focus="isshowuser = false"
                                    @blur="isshowuser = true">
                                <i slot="prefix" class="el-input__icon el-icon-icon-40one" v-if="isshowuser"></i>
                                <i slot="prefix" class="el-input__icon el-icon-icon-40one"
                                   style="color: #688AC2 !important;" v-if="!isshowuser"></i>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="login-form-input">
                        <div class="login-form-label">密码</div>
                        <el-form-item prop="password">
                            <el-input
                                    placeholder="请输入密码"
                                    type="password"
                                    v-model.trim="ruleForm.password"
                                    @focus="isshowpass = false"
                                    @blur="isshowpass = true">
                                <i slot="prefix" class="el-input__icon el-icon-icon-mima" v-if="isshowpass"></i>
                                <i slot="prefix" class="el-input__icon el-icon-icon-mima"
                                   style="color: #688AC2 !important;" v-if="!isshowpass"></i>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="login-form-input" style="margin-top: 55px">
                        <!--<div class="login-form-label">&nbsp;</div>-->
                        <el-form-item>
                            <el-button type="primary" @click="loginIn('ruleForm')" :loading="loading">
                                {{loading?'登录中':'登录'}}
                            </el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!--<div class="login-footer">-->
                <!--<div class="login-footer-text">© 2018 大马鹿, Crafted with by <span>DaMaLu</span></div>-->
            <!--</div>-->
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    userName: '',
                    password: ''
                },
                rules: {
                    userName: [
                        {required: true, message: '请输入账户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                },
                clientHeight1: 0,
                clientWidth1: 0,
                positionX: 30,
                positionY: 30,
                loginApi: 'user/session',
                loading: false,
                isshowuser: true, // username获取焦点
                isshowpass: true // password获取焦点
            }
        },
        created() {
            let self = this;
            document.addEventListener('keyup', (e) => {
                let key = window.event.keyCode;
                if (key === 13) {
                    if (self.ruleForm) {
                        self.loginIn('ruleForm');
                    }

                }
            }, false)
        },
        destroyed() {
            document.removeEventListener('keyup', () => {
            }, false);
        },
        mounted() {
            this.creatCanvas();
        },
        methods: {
            creatCanvas() {
                var canvas = document.querySelector('#canvas');
                var ctx = canvas.getContext("2d");
                var starlist = [];

                function init() {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight - 5;
                }

                init();
                window.onresize = init;
                canvas.addEventListener('mousemove', function (e) {
                    starlist.push(new Star(e.offsetX, e.offsetY));
                })

                function random(min, max) {
                    return Math.floor((max - min) * Math.random() + min);
                }

                function Star(x, y) {
                    this.x = x;
                    this.y = y;
                    this.vx = (Math.random() - 0.5) * 3;
                    this.vy = (Math.random() - 0.5) * 3;
                    this.color = 'rgba(' + random(200, 256) + ',' + random(200, 256) + ',' + random(200, 256) + ',' + 0.8 + ')';
                    this.a = 1;
                    // console.log(this.color);
                    this.draw();
                }

                Star.prototype = {
                    draw: function () {
                        ctx.beginPath();
                        ctx.fillStyle = this.color;
                        ctx.globalCompositeOperation = 'lighter'
                        ctx.globalAlpha = this.a;
                        ctx.arc(this.x, this.y, 4, 0, Math.PI * 2, false);
                        ctx.fill();
                        this.updata();
                    },
                    updata() {
                        this.x += this.vx;
                        this.y += this.vy;
                        this.a *= 0.98;
                    }
                };

                function render() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                    starlist.forEach((item, i) => {
                        item.draw();
                        if (item.a < 0.05) {
                            starlist.splice(i, 1);
                        }
                    });
                    requestAnimationFrame(render);
                }

                render();
            },
            loginIn(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let params = {
                            password: this.ruleForm.password,
                            phone: this.ruleForm.userName
                        };
                        this.$http.post(this.loginApi, params)
                            .then((response) => {
                                this.loading = false;
                                this.$message.success('登录成功！');
                                localStorage.setItem('userInfo', JSON.stringify(response.data.data));
                                localStorage.setItem('token', response.data.data.api_token);
                                this.$router.push('/');
                            })
                            .catch((error) => {
                                this.loading = false;
                                if (error.response.data.msg) {
                                    this.$message.error(error.response.data.msg);
                                } else {
                                    this.$message.error('请求错误：' + error.response.status);
                                }
                            });
                    } else {
                        return false;
                    }
                });

            },
        }
    }
</script>
<style lang="less">
    .login-form-input .el-input__inner {
        height: 50px !important;
        line-height: 50px !important;

    }

    .login-form-input .el-input.is-active .el-input__inner,
    .login-form-input .el-input__inner:focus {
        border: 1px solid rgba(104, 138, 194, 1) !important;
    }

    .login-form-input .el-button {
        width: 100%;
        border-radius: 10px;
        height: 64px;
        font-size: 18px;
        letter-spacing: 4px;
    }

    .login-form-input .el-button--primary {
        background: rgba(104, 138, 194, 1);
        border-color: rgba(104, 138, 194, 1);
    }

    .login-form-input .el-button--primary:focus,
    .login-form-input .el-button--primary:hover {
        background: #009688;
        border-color: #009688;
    }

    .login-form-input .el-input__icon {
        width: 50px;
    }

    .login-form-input .el-input--prefix .el-input__inner {
        padding-left: 50px;
    }

    [class^="el-icon-icon-40one"],
    [class*="el-icon-icon-40one"] {
        font-size: 26px !important;
        color: rgba(138, 138, 138, 1) !important;
    }

    [class^="el-icon-icon-mima"],
    [class*="el-icon-icon-mima"] {
        font-size: 22px !important;
        color: rgba(138, 138, 138, 1) !important;
    }
</style>
<style scoped>
    * {
        box-sizing: border-box;
    }

    ::-webkit-input-placeholder { /* WebKit browsers */
        color: #8a998f;
        font-size: 14px;
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #909399;
        font-size: 14px;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #909399;
        font-size: 14px;
    }

    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #909399;
        font-size: 14px;
    }

    .login {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: url("./imgs/login2x.png");
        position: relative;
    }

    .login-box {
        background-color: rgba(0, 0, 0, .3);
        width: 500px;
        height: 500px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -250px;
        z-index: 15;
    }
    .login-form {
        padding: 60px 60px 0 60px;
    }

    .login-form-input {
        margin-top: 31px;
    }

    .login-form-label {
        font-size: 16px;
        color: #fff;
        padding-bottom: 9px;
    }

    .login-footer {
        margin-top: 80px;
        color: #9B9B9B;
        padding: 0 173px 0 105px;

    }

    .login-footer-text {
        text-align: center;
    }

    .login-footer span {
        color: #009688;
    }
</style>
